<template>
  <scroller>
    <div class="allocation">
      <section>
        <div class="con">
          <div class="con-c">
            <div class="title">
              <p>{{taskInfo['actAllot.allotNumber']}}</p>
              <span>{{taskInfo['actApply.actNode']}}</span>
            </div>
            <div class="detail">
              <p class="lan">调拨明细</p>
              <p class="detail-l hui">调出单位</p>
              <span class="detail-r"> {{data.outOffice && data.outOffice.name}}</span>
              <p class="detail-l hui">调出人姓名</p>
              <span class="detail-r">{{data.outUser && data.outUser.name}}</span>
              <p class="detail-l hui">调出人电话</p>
              <span class="detail-r"> {{data.outUserPhone}}</span>
              <p class="detail-l hui">调入单位 </p>
              <span class="detail-r"> {{data.inOffice && data.inOffice.name}}</span>
              <p class="detail-l hui">调入人姓名</p>
              <span class="detail-r"> {{data.inUser && data.inUser.name}}</span>
              <p class="detail-l hui">调入人电话 </p>
              <span class="detail-r"> {{data.inUserPhone}}</span>
              <p class="detail-l hui">调入项目 </p>
              <span class="detail-r"> {{data.inWarehouse && data.inWarehouse.name}}</span>
              <p class="detail-l hui">项目地址 </p>
              <span class="detail-r"> {{data.inWarehouseAddr}}</span>
              <p class="detail-l hui">备注 </p>
              <span class="detail-r">{{data.remarks}}</span>
            </div>
          </div>
        </div>

        <div class="info" v-for="item in data.pyActAllotLogList" :key="item.id">
          <div class="info-c">
            <p class="hei" style="border-bottom: 1px dashed #d4d4d4;">设备信息</p>
            <div class="info-l">
              <div class="info-p">
                <p class="hui">设备类型：</p>
                <span class="hei">{{item.apiDeviceType}}</span>
              </div>
              <div class="info-p">
                <p class="hui">主机型号：</p>
                <span class="lan">{{item.manufacturerModel.manufacturerModel}}</span>
              </div>
              <div class="info-p">
                <p class="hui">设备单位：</p>
                <span class="hei">{{item.apiDeviceUnit}}</span>
              </div>
            </div>
            <div class="info-r">
              <div class="info-p">
                <p class="hui">设备名称：</p>
                <span class="lan">{{item.apiDeviceName}}</span>
              </div>
              <div class="info-p">
                <p class="hui">物料号：</p>
                <span class="lan">{{item.deviceModel.deviceModel}}</span>
              </div>
              <div class="info-p">
                <p class="hui">申请数量：</p>
                <span class="lan">{{item.applyCount}}</span>
              </div>
            </div>
            <p style="display: inline-block;" class="hui">备注：</p>
            <span>{{item.remarks}}</span>
          </div>
        </div>
      </section>
    </div>
  </scroller>
</template>

<script>
import { mapGetters } from 'vuex'
import { Loadmore } from 'mint-ui'

export default {
  name: 'ActApplyAllocation',
  components: {
    Loadmore
  },
  computed: {
    ...mapGetters({
      taskInfo: 'task/info'
    })
  },
  props: {
    data: {
      type: Object,
      default: () => ({
        outOffice: {},
        outUser: {},
        inOffice: {},
        inWarehouse: {}
      })
    }
  },
  data () {
    return {}
  },
  methods: {

  }
}
</script>

<style scoped>
.allocation {
  height: 100%;
  background: #eaeeef;
  margin-bottom: 4rem;
}
.con {
  width: 92%;
  margin-left: 4%;
  min-height: 21rem;
  background: #fff;
  margin-top: 1rem;
  border-radius: 6px;
  overflow: hidden;
}
.con-c {
  padding: 0.5rem;
}
.title {
  height: 2rem;
  font-size: 0.8rem;
  border-bottom: 1px dashed #d4d4d4;
}
.title p {
  line-height: 2rem;
  float: left;
}
.title span {
  line-height: 2rem;
  float: right;
  color: #f5af41;
}
.detail {
  font-size: 0.8rem;
  line-height: 1.8rem;
}
.detail-l {
  display: inline-block;
  width: 40%;
  float: left;
}
.detail-r {
  display: inline-block;
  width: 60%;
  float: left;
}
.info {
  width: 92%;
  margin-left: 4%;
  min-height: 9rem;
  background: #fff;
  margin-top: 1rem;
  border-radius: 6px;
  overflow: hidden;
}
.info-c {
  padding: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.5rem;
}
.info-l {
  width: 50%;
  float: left;
}
.info-r {
  width: 50%;
  float: left;
}
.info-l p {
  display: inline-block;
}
.info-r p {
  display: inline-block;
}
.info-p {
  width: 100%;
}
.fix {
  width: 100%;
  height: 3rem;
  position: fixed;
  bottom: 0;
  display: flex;
}
.qidong {
  width: 50%;
  height: 3rem;
  background: #63758a;
  border: none;
  color: #fff;
}
.qued {
  width: 50%;
  height: 3rem;
  background: #4a82c6;
  border: none;
  color: #fff;
}
.hui {
  color: #606063;
}
.lan {
  color: #1e82d2;
}
</style>
